<template>
    <div>
   <el-card>
        <el-table :data="skulist.records" border style="width: 100%">
        
      <el-table-column fixed  label="序号" type="index" width="80" align="center">
      </el-table-column>
      <el-table-column prop="skuName" label="名称" width="100"> </el-table-column>
      <el-table-column prop="skuDesc" label="描述">
      </el-table-column>
      <el-table-column prop="city" label="默认图片" width="100"> 
     
     <!-- 这里得注意一下 -->
      <template slot-scope="{row}">
          <img :src="row.skuDefaultImg" style="width: 80px; height: 80px" />
        </template>
        
      </el-table-column>
      <el-table-column prop="weight" label="重量" width="180">
      </el-table-column>
      <el-table-column prop="price" label="价格" width="150"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="250" align="center">
        <template slot-scope="{row}">
          <el-button type="success" size="small" v-if="row.isSale===0" @click="getupad(row)" title="商品下架操作" icon="el-icon-top"></el-button>
          <el-button type="info" size="small" v-else  @click="getadup(row)" title="商品上架操作" icon="el-icon-bottom"></el-button>
          <el-button type="primary" size="small"  title="修改用户" @click="edit" icon="el-icon-edit"></el-button>
          <el-button  title="查看详情"  @click="drawer = true" type="info" style="margin-left: 16px;" size="small" icon="el-icon-user-solid"></el-button>
         
        <el-popconfirm  :title="`确定要删除[${row.skuName}]吗？`" @confirm="getskudeleteSku(row)">
        <el-button type="danger" size="small" slot="reference" icon="el-icon-delete"  style="margin-left:12px"></el-button>
        </el-popconfirm>
  
        </template>
      </el-table-column>
    </el-table>


 <!-- 分页 -->
    <el-pagination
    style="margin-top:15px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      
      :page-sizes="[5, 10, 20, 30]"
      :page-size="100"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total">
    </el-pagination>
   </el-card>


  <!-- 弹框 -->

<el-drawer
  title="sku商品详情"
  style="font-size:40px"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose"
  >
    <el-table-column class="row-bg" justify="center">
        <span :span="5" >名称</span>
        <span :span="16"></span>
      </el-table-column>
      <el-table-column class="row-bg" justify="center">
        <span :span="5">描述</span>
        
      </el-table-column>
      <el-table-column class="row-bg" justify="center"> 
        <!-- 行  列 -->
        <span :span="5">价格</span>
        <span :span="16"></span>
      </el-table-column>
     
        <span :span="5">平台属性</span>

      <div class="block">
   
    <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item.id">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
       
</el-drawer>
 



    </div>

</template>

<script>
import skuApi from '@/api/prduct/sku'
import { Divider, Message } from 'element-ui';

export default {
    name: "Sku",

    data(){
        return{
   
  tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
        ],
        // 分页
        page:1,
        limit:5,
        searchObj:"",
        total:0,
        pagelist:[],

        //sku列表
        skulist:{},

        //弹窗数据
          drawer: false,
        direction: 'rtl',
        }
    },
     methods: {
    onSubmit() {
      console.log("submit!");
    },
//=========分页============//
    handleSizeChange(val) {
      this.limit=val
      this.getskulist()
    },
    handleCurrentChange(val) {
      this.page=val
      this.getskulist()
    },
//============获取sku信息================//
    //获取sku信息
   async getskulist(){
      const result=  await skuApi.getSkuLsit(this.page,this.limit)
      console.log('sku获取中')
      if(result.code===200){
        console.log(result)
        this.skulist=result.data
        this.total=result.data.total
      }else{
        Message.success('获取失败')
      }
    },
  

//=======上下线============//


  async getupad(row){
    const result=await skuApi.skucancelSale(row.id)
    if(result.code===200){
      row.isSale=1
            Message.error('上架成功')
    }
  },


async getadup(row){
  const result=await skuApi.skuonSale(row.id)
  if(result.code===200){
    row.isSale=0
          Message.error('下架成功')
  }
},

//=========删除========//
async getskudeleteSku(row){
    const result=await skuApi.skudeleteSku(row.id)
    if(result.code===200){
      Message.error("删除成功")
      this.getskulist()
    }else{
       Message.error("删除失败，请稍后重试")
    }
},

//=======修改正处于开发者=====//
edit(){
        const image='<div><img src="https://ts1.cn.mm.bing.net/th/id/R-C.eb57e7532f3daf7a031f8daafa3b7c41?rik=hzmNGrPBhlNMSQ&riu=http%3a%2f%2fwww.gx8899.com%2fuploads%2fallimg%2f2017112908%2f3ybswbsu2bt.jpg&ehk=vor09r7ibnoZ7dL%2bOsIj98vzktXTmNdnSEEvr1V0Xtw%3d&risl=&pid=ImgRaw&r=0" alt=""></div>'
        this.$alert(image, '抱歉此功能换在开发中，请谅解', {
          dangerouslyUseHTMLString: true
        });
},


//=========================//
// 弹窗事件
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    



   },
     mounted() {
        this.getskulist()
     },



}
</script>

<style scoped>

</style>